<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>登录注册</title>
	<style>
		body {
			background-color: #f0f0f0;
			font-family: Arial, sans-serif;
			display: flex;
			justify-content: center; /* 水平居中 */
			align-items: center; /* 垂直居中 */
			height: 100vh; /* 使容器占满整个视口高度 */
			margin: 0; /* 去掉默认边距 */
		}
		.container-fluid {
			width: 400px; /* 设置容器宽度 */
			background-color: white;
			padding: 20px;
			border-radius: 5px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			position: relative; /* 使子元素绝对定位 */
		}
		h2 {
			text-align: center;
			color: #333;
		}
		label {
			display: block;
			margin-bottom: 5px;
		}
		input {
			width: 100%; /* 输入框宽度100% */
			padding: 10px;
			margin-bottom: 15px;
			border: 1px solid #ccc;
			border-radius: 4px;
		}
		button {
			width: 100%; /* 按钮宽度100% */
			padding: 10px;
			background-color: #007bff;
			color: white;
			border: none;
			border-radius: 4px;
			cursor: pointer;
		}
		button:hover {
			background-color: #0056b3;
		}
		.toggle-button {
			position: absolute; /* 绝对定位 */
			bottom: 10px; /* 距离底部10px */
			right: 10px; /* 距离右侧10px */
			background-color: #ccc; /* 灰色背景 */
			color: black; /* 黑色文字 */
			border: none; /* 去掉边框 */
			border-radius: 4px; /* 圆角 */
			cursor: pointer; /* 鼠标指针 */
			padding: 3px 6px; /* 内边距 */
			font-size: 10px; /* 字体大小 */
			transition: background-color 0.3s, transform 0.1s; /* 添加过渡效果 */
		}
		.toggle-button:hover {
			background-color: #bbb; /* 悬停时变暗 */
			transform: scale(0.95); /* 按下效果 */
		}
	</style>
</head>

<body>
	<div id="home1" class="container-fluid">
		<!-- 登录表单 -->
		<div id="loginFormContainer">
			<h2>登录</h2>
			<form id="loginForm" method="post" onsubmit="login(event)">
				<div>
					<label for="username">用户名:</label>
					<input type="text" id="username" name="username" required>
				</div>
				<div>
					<label for="password">密码:</label>
					<input type="password" id="password" name="password" required>
				</div>
				<div>
					<button type="submit">登录</button>
				</div>
			</form>
		</div>
		<!-- 注册表单 -->
		<div id="registerFormContainer" style="display: none;">
			<h2>注册</h2>
			<form id="registerForm" method="post" onsubmit="register(event)">
				<div>
					<label for="newUsername">用户名:</label>
					<input type="text" id="newUsername" name="newUsername" required>
				</div>
				<div>
					<label for="newPassword">密码:</label>
					<input type="password" id="newPassword" name="newPassword" required>
				</div>
				<div>
					<button type="submit">注册</button>
				</div>
			</form>
		</div>
		<!-- 切换按钮 -->
		<div class="toggle-button" onclick="toggleForms()">
			<span id="toggleText">注册</span> <!-- 默认显示“注册” -->
		</div>
	</div>
</body>

<script>
	function login(event) {
		event.preventDefault();//阻止默认行为
		//获取用户名和密码
		const username = document.getElementById('username').value;
		const password = document.getElementById('password').value;
		//判空
		if (username === '' || password === '') {
			alert('用户名和密码不能为空');
			return;
		}
        console.log("登录", username, password);
        //发送请求
		fetch('/login', {
			method: 'POST',
			body: JSON.stringify({username, password}),
			headers: {
				'Content-Type': 'application/json'
			}
		}).then(response => {
            console.log(response);
            if (response.status === 200) {
                goBack();
            }
            else {
                alert('登录失败');
            }
		})
	}

    function register(event) {
        event.preventDefault();
        //获取用户名和密码
		const username = document.getElementById('newUsername').value;
		const password = document.getElementById('newPassword').value;
        //判空
		if (username === '' || password === '') {
			alert('用户名和密码不能为空');
			return;
		}
        console.log("注册", username, password);
        //发送请求
		fetch('/register', {
			method: 'POST',
			body: JSON.stringify({username, password}),
			headers: {
				'Content-Type': 'application/json'
			}
		}).then(response => {
			console.log(response);
            if (response.status !== 200) {
                alert('注册失败');
            }
            else {
                alert('注册成功');
                //切换到登录页面
                toggleForms();
            }
		})
    }

	function toggleForms() {
		const loginForm = document.getElementById('loginFormContainer');
		const registerForm = document.getElementById('registerFormContainer');
		const toggleText = document.getElementById('toggleText');

		if (loginForm.style.display === "none") {
			loginForm.style.display = "block";
			registerForm.style.display = "none";
			toggleText.innerText = "注册"; // 登录时显示“注册”
		} else {
			loginForm.style.display = "none";
			registerForm.style.display = "block";
			toggleText.innerText = "登录"; // 注册时显示“登录”
		}
	}

    function goBack() {
        window.history.back(); // 返回到上一个页面
    }
</script>